<template>
    <div id="Content-page">
        <Paging :pagData="[{ name: '限时优惠', router: '/account' }]" />
        <div class="content-main">
            <div class="global-display subbuttom">
                <el-button type="primary" @click="addGoods">新增限时商品</el-button>
            </div>
            <el-table :data="tableData">
                <el-table-column label="商品信息" width="180"> <template #default="scope">
                        <div class="flex-start"><el-image style="width: 40px; height: 40px; border-radius: 5px"
                                :src="scope.row.goodsInfo?.image" fit="cover"
                                :preview-src-list="[scope.row.goodsInfo?.image]" preview-teleported />
                            <div style="margin-left: 10px;">
                                <p>{{ scope.row.goodsInfo?.name }}</p>
                                <p>库存：{{ scope.row.goodsInfo?.stock }}</p>
                            </div>
                        </div>
                    </template></el-table-column>
                <el-table-column label="原价"><template #default="scope">
                        {{ scope.row.goodsInfo?.price }}
                    </template> </el-table-column>
                <el-table-column label="折扣"> <template #default="scope">{{ scope.row.account ? scope.row.account + "折" :
            "" }}</template></el-table-column>
                <el-table-column label="第二杯半价" prop="isHalfPrice"> </el-table-column>
                <el-table-column label="减价" prop="minusPrice"> </el-table-column>
                <el-table-column label="优惠价" prop="payPrice"> </el-table-column>
                <el-table-column label="优惠方式"><template #default="scope">{{ getMethod(scope.row.method) }}</template>
                </el-table-column>
                <el-table-column label="活动时间" width="180" prop="activityDate"><template #default="scope">{{
            formatDate(scope.row.activityDate[0]) + " 至 " +
            formatDate(scope.row.activityDate[1]) }}</template>
                </el-table-column>
                <el-table-column label="状态"><template #default="scope">{{ getStatus(scope.row.status) }}</template>
                </el-table-column>
                <el-table-column label="操作"><template #default="scope">
                        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="primary" @click="del(scope.row._id, scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer v-model="drawer" size="600px" title="新增限时商品">
            <el-form :model="form" ref="formRef">
                <el-form-item label="优惠方式" prop="method">
                    <el-select v-model="form.method" placeholder="Select">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="form.method == 1" label="折扣度" prop="account">
                    <el-input-number v-model="form.account" :min="0" :max="10" />
                </el-form-item>
                <el-form-item v-if="form.method == 2" label="优惠价" prop="payPrice">
                    <el-input-number v-model="form.payPrice" :min="0" />
                </el-form-item>
                <el-form-item v-if="form.method == 3" label="第二杯半价" prop="isHalfPrice">
                    <el-switch v-model="form.isHalfPrice" />
                </el-form-item>
                <el-form-item label="活动时间" prop="activityDate">
                    <el-date-picker v-model="form.activityDate" type="datetimerange"
                        :disabled-date="date => date < new Date()" />
                </el-form-item>
                <el-form-item label="选择商品" prop="goods">
                    <el-select :disabled="Boolean(form._id)" v-model="form.goods" multiple placeholder="Select">
                        <el-option v-for="item in goodsList" :key="item._id" :label="item.name" :value="item._id" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script setup>
// 顶部导航组件
import { formatDate } from "@/utils";
import Paging from "@/page/component/Paging-component.vue";
import { ElMessage } from "element-plus"
import { nextTick, onMounted, reactive, ref } from "vue";
import request from "@/api/request.js";
const options = [{ label: "折扣", value: 1 }, { label: "特价优惠", value: 2 }, { label: "第二杯半价", value: 3 },]
const formRef = ref(null)
const form = reactive({
    method: 1,
    account: undefined,
    payPrice: undefined,
    goods: [],
    isHalfPrice: false,
    activityDate: [],
})
const drawer = ref(false)
const goodsList = ref([]);
const tableData = ref([]);
const submit = () => {
    console.log(form);
    if (form._id) {
        request.post("/editAccount", form).then(res => {
            request.get("/getAccountList").then(res => {
                tableData.value = res.data;
                drawer.value = false;
            })
        })
    } else {
        request.post("/addAccount", form).then(res => {
            console.log(res);
        })
    }
}
onMounted(() => {
    request.get("/getAccountList").then(res => {
        tableData.value = res.data;
    })
    request.get("/getGoodsList", { page: 1, size: 1000 }).then(res => {
        goodsList.value = res.data.list;
    })
})
const getMethod = (method) => {
    const arr = ["折扣", "特价优惠", "第二杯半价"];
    return arr[method - 1]
}
const getStatus = (status) => {
    const arr = ["未开始", "生效中", "已结束"];
    return arr[status - 1]
}
const edit = (row) => {
    drawer.value = true;
    nextTick(() => {
        Object.assign(form, {})
        Object.assign(form, row)
        form.goods = [row.goodsId];
        console.log(form);
    })
}
const addGoods = () => {
    drawer.value = true;
    form._id=undefined;
    formRef.value?.resetFields();

}
const del = async (_id, index) => {
    await request.delete(`delAccount/${_id}`)
    tableData.value.slice(index, 1)
    ElMessage.success("删除成功")
}
</script>
<style lang="scss" scoped></style>